<template>
  <div class="menu">
    <ul>

    </ul>
  </div>
</template>

<script>

export default {
  data() {
    return {
      menuData: [
        {
          id: 1,
          title: 'Item 1',
          children: [
            { id: 11, name: 'Sub Item 1-1' },
            { id: 12, name: 'Sub Item 1-2' }
          ]
        },
        {
          id: 2,
          name: 'Item 2',
          children: [
            { id: 21, name: 'Sub Item 2-1' },
            { id: 22, name: 'Sub Item 2-2' }
          ]
        }
      ]
    };
  }
};
</script>

<style>
body{
  background-color: #f2f4f7;
}
.menu {
  width: 200px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  position: relative;
}

ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
}

li:hover > ul {
  display: block;
}
</style>